import React, { Component } from "react";
import { connect } from "react-redux"
import { Carousel, WingBlank } from 'antd-mobile';
import { getGoodsDetail } from "../../api/index"
import { addCartItem } from "../../store/action/cartAction"

import { addCart } from "../../api/cart"
import { addCollection, isLike } from "../../api/user"
import Tipdialog from "../../components/tipdialog"
import "./index.css"

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            category: "",
            imgs: [],
            material: "",
            name: "",
            num: 0,
            price: 0,
            technology: "",
            title: "",
            isLike: false,
            isShow:false,
            msg:""
        }
    }

    componentDidMount() {


        let productid = this.props.match.params.id;
        getGoodsDetail(productid).then(res => {
            let { category, imgs, material, name, num, price, technology, title } = res.data.data;
            this.setState({
                category,
                imgs,
                material,
                name,
                num,
                price,
                technology,
                title
            })
        })
        if (localStorage.getItem("userinfo")) {
            let userid = JSON.parse(localStorage.getItem("userinfo")).id;
            isLike({
                userid,
                productid
            }).then(res => {
                if (res.data.code == 0) {
                    this.setState({
                        isLike: true
                    })
                } else {
                    this.setState({
                        isLike: false
                    })
                }
            })
        }

    }


    addCart() {
        if (!localStorage.getItem("isLogin")) {
            this.props.history.push("/login");
        } else {
            let userid = JSON.parse(localStorage.getItem("userinfo")).id;
            let productid = this.props.match.params.id;
            addCart({
                userid,
                productid
            }).then(res => {
               console.log(res.data.code)
               if(res.data.code===0){
                   this.setState({
                       isShow:true,
                       msg:"加入成功"
                   })
               }else{
                this.setState({
                    isShow:true,
                    msg:"购物车已存在该商品"
                })
               }
            })
        }
    }

    addCollection() {
        if (!localStorage.getItem("isLogin")) {
            this.props.history.push("/login")

        } else {
            let userid = JSON.parse(localStorage.getItem("userinfo")).id;
            let productid = this.props.match.params.id;
            addCollection({
                userid,
                productid
            }).then(res => {
                if (res.data.code === 0) {
                    this.setState({
                        isLike: true
                    })
                } else if (res.data.code === 2) {
                    this.setState({
                        isLike: false
                    })
                }
            })
        }

    }

    closeDialog(){
        this.setState({
            isShow:false
        })
    }



    render() {
        let {
            /*  category,
             material,
             technology, */
            imgs,
            name,
            num,
            price,
            title,
            isLike,
            isShow,
            msg
        } = this.state;
        return (
            <div className="detail">
                <WingBlank>
                    <Carousel autoplay={true} infinite>
                        {imgs.map((item, index) => (
                            <a key={index} href="javascript:;" style={{ display: 'inline-block', width: '100%', height: "auto" }}>
                                <img
                                    src={item}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top', height: "7.5rem" }}
                                    onLoad={() => {
                                        window.dispatchEvent(new Event('resize'));
                                    }} />
                            </a>
                        ))}
                    </Carousel>
                </WingBlank>

                <div className="goodsinfo">
                    <h3>￥<span>{price.toFixed(2)}</span></h3>
                    <p className="cl"></p>
                    <p className="title">{title}</p>
                    <p className="name-num">
                        <span className="fl">{name}</span>
                        <span className="fr">剩余：{num}件</span>
                    </p>
                </div>

                <div className="bot">
                    <span className={isLike ? "active" : ""}
                        onClick={this.addCollection.bind(this)}>
                        <i ></i>
                        收藏
                    </span>
                    <p>
                        <em className="addcart" onClick={this.addCart.bind(this)}>加入购物车</em>
                        <em>立即购买</em>
                    </p>
                </div>
                {isShow?<Tipdialog msg={msg} closeDialog={this.closeDialog.bind(this)}/>:null}
                
            </div>
        )
    }
}


const mapStateToProps = state => {
    return {
        cartReducer: state.cartReducer.list,
        total: state.cartReducer.total,
        isAllCheck: state.cartReducer.isAllCheck
    }
}


const mapDispatchToProps = dispatch => {
    return {
        addCartItem: function () {
            dispatch(addCartItem())
        }

    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Index)